expenditurePage = 1;
$(function() {

	renderexpenditurePage()


	$('.container .wrapper .box .title .subject h4').click(function(event) {
		event.stopPropagation();
		$('.container .wrapper .box .title .items').toggle()
	})
	$('.container .wrapper .box ').on('click', '.title .items p', function() {
		$('.container .wrapper .box .title .subject h4').text($(this).text())
		renderOverYears($(this).text())
		$('.container .wrapper .box .title .items').hide()
	})
	$(document).click(function() {
		$('.container .wrapper .box .title .items').hide()
	})
})
const rateparams = {
	username: getUsername,
	xm01: fullTaskNumber,
	status: 2,
	chartPage: 80803
}

function renderexpenditurePage() {
	getStatistics()
	renderSubjects()
	renderMainDept()
	renderQuarterSubject()
}

function getStatistics() {
	// $.get(`${API_URL}getdata`, {
	// 	...rateparams,
	// 	xm01:fullTaskNumber,
	// 	chartNo:1
	// }, function(res) {
	// 	const re = eval("(" + res + ")").items[0].charts[0].data[0];
	// 	$('.container .wrapper .statistics').html(`<div class="box">
	// 						<div class="left">
	// 							<p>计划支出</p>
	// 							<h3>${re.key01}<span>万元</span></h3>
	// 						</div>
	// 					</div>
	// 					<div class="box">
	// 						<div class="left">
	// 							<p>实际支出</p>
	// 							<h3>${re.key02}<span>万元</span></h3>
	// 						</div>
	// 					</div>
	// 					<div class="box">
	// 						<div class="left">
	// 							<p>执行率</p>
	// 							<h3>${re.key03}%<span></span></h3>
	// 						</div>
	// 						<div class="pie">
	// 							<svg><circle cx="20" cy="20" r="16" stroke="#0FC6C2"  stroke-width="8" fill="rgba(255, 255, 255, 0.2)" stroke-linecap="round" /><circle cx="20" cy="20" r="16"  stroke="${ re.key03>100?'red':'#E5E6EB'}" stroke-width="8" fill="none" stroke-dasharray="${Math.PI * 32}" stroke-dashoffset="${Math.PI * 32 * ( re.key03>100?0: re.key03/100)}"  /></svg>
	// 						</div>
	// 					</div>`)
	// })
	const re = {
		key01: "322.59",
		key02: "126337.79",
		key03: "39163.58"
	};
	$('.container .wrapper .statistics').html(`<div class="box">
						<div class="left">
							<p>计划支出</p>
							<h3>${re.key01}<span>万元</span></h3>
						</div>
					</div>
					<div class="box">
						<div class="left">
							<p>实际支出</p>
							<h3>${re.key02}<span>万元</span></h3>
						</div>
					</div>
					<div class="box">
						<div class="left">
							<p>执行率</p>
							<h3>${re.key03}%<span></span></h3>
						</div>
						<div class="pie">
							<svg><circle cx="20" cy="20" r="16" stroke="#0FC6C2"  stroke-width="8" fill="rgba(255, 255, 255, 0.2)" stroke-linecap="round" /><circle cx="20" cy="20" r="16"  stroke="${ re.key03>100?'red':'#E5E6EB'}" stroke-width="8" fill="none" stroke-dasharray="${Math.PI * 32}" stroke-dashoffset="${Math.PI * 32 * ( re.key03>100?0: re.key03/100)}"  /></svg>
						</div>
					</div>`)
}

function renderSubjects() {
	// $.get(`${API_URL}getList/kmmc`, {}, function(res) {
	// 	res.items.unshift({
	// 		kmmc: '全部'
	// 	})
	// 	const items = res.items.map(it => `<p>${it.kmmc}</p>`).join('')
	// 	$('.container .wrapper .box .title .subject h4').text(res.items[0].kmmc)
	// 	$('.container .wrapper .box .title .items').html(items)
	// 	renderOverYears(res.items[0].kmmc)
	// })

	const res = {
		"items": [{
			"kmmc": "直接计入"
		}, {
			"kmmc": "外协费"
		}, {
			"kmmc": "固定资产折旧费"
		}, {
			"kmmc": "管理费"
		}, {
			"kmmc": "劳务费"
		}, {
			"kmmc": "工资及劳务费"
		}, {
			"kmmc": "工资及福利费"
		}, {
			"kmmc": "会议费"
		}, {
			"kmmc": "材料费"
		}, {
			"kmmc": "职工工资"
		}, {
			"kmmc": "设计费"
		}, {
			"kmmc": "试验费"
		}, {
			"kmmc": "固定资产折旧"
		}, {
			"kmmc": "燃料动力费"
		}, {
			"kmmc": "专用工艺装备费"
		}, {
			"kmmc": "专用费"
		}, {
			"kmmc": "差旅费"
		}, {
			"kmmc": "专家咨询费"
		}, {
			"kmmc": "分摊计入"
		}],
		"hasMore": false,
		"limit": 25,
		"offset": 0,
		"count": 19,
		"links": [{
			"rel": "self",
			"href": "http://www.esunrising.net:8099/ords/cl/charts/getList/kmmc"
		}, {
			"rel": "describedby",
			"href": "http://www.esunrising.net:8099/ords/cl/metadata-catalog/charts/getList/item"
		}, {
			"rel": "first",
			"href": "http://www.esunrising.net:8099/ords/cl/charts/getList/kmmc"
		}]
	}
	res.items.unshift({
		kmmc: '全部'
	})
	const items = res.items.map(it => `<p>${it.kmmc}</p>`).join('')
	$('.container .wrapper .box .title .subject h4').text(res.items[0].kmmc)
	$('.container .wrapper .box .title .items').html(items)
	renderOverYears(res.items[0].kmmc)
}


function renderOverYears(subject) {
	// $.get(`${API_URL}getdata`, {
	// 	...rateparams,
	// 	xm01: fullTaskNumber,
	// 	xm02: '',
	// 	xm03: subject === '全部' ? '' : subject,
	// 	chartNo: 2
	// }, function(res) {
	// 	const resp = eval("(" + res + ")").items[0].charts[0];
	// 	const name = resp.data[0].key02.split(',')
	// 	renderLineChart('chart1', resp, name)
	// 	renderTable1Data(resp.data)
	// })
	const resp = {
		"chart_no": "2",
		"chart_name": "支出-科目历年月度支出{参数-xm01-任务编号；xm02-年份；xm03-科目名称;返回值：key01-年份；key02-月份；key03-金额}",
		"key_count": "3",
		"data": [{
			"key01": "02",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "0,0,0,0,-29.47"
		}, {
			"key01": "03",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "0,0,1.97,0,0"
		}, {
			"key01": "04",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "19.33,0.63,0,1732.09,539.81"
		}, {
			"key01": "05",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "264.11,102.79,104.17,853.10,1126.69"
		}, {
			"key01": "06",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "4.78,509.59,642.96,745.06,939.85"
		}, {
			"key01": "07",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "94.08,645.65,765.40,82.46,338.62"
		}, {
			"key01": "08",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "8.66,283.44,420.87,705.27,6031.24"
		}, {
			"key01": "09",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "28.16,1273.70,723.81,758.27,2456.72"
		}, {
			"key01": "10",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "388.57,172.27,2387.70,6154.84,7755.72"
		}, {
			"key01": "11",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "614.94,674.51,2762.31,7541.27,5913.42"
		}, {
			"key01": "12",
			"key02": "2018,2019,2020,2021,2022",
			"key03": "6865.98,11639.26,13482.42,15496.26,22314.50"
		}]
	};
	const name = resp.data[0].key02.split(',')
	renderLineChart('chart1', resp, name)
	renderTable1Data(resp.data)
}

function renderMainDept() {
	// $.get(`${API_URL}getdata`, {
	// 	...rateparams,
	// 	xm01: fullTaskNumber,
	// 	xm02: fullYear,
	// 	chartNo: 3
	// }, function(res) {
	// 	const resp = eval("(" + res + ")").items[0].charts[0];
	// 	const name = resp.data[0].key01.split(',')
	// 	renderBarChart('chart2', resp, name, '月')
	// 	renderTable2Data(resp.data)
	// })


	const resp = {
		"chart_no": "3",
		"chart_name": "支出-主要部门支出{参数：xm01-任务编号；xm02-年份；返回值：key01-部门；key02-月份；key03-金额}",
		"key_count": "3",
		"data": [{
			"key01": "一/四事业部,七事业部,三事业部,九十一车间,九车间,二事业部",
			"key02": "02",
			"key03": "0,0,-29.47,0,0,0"
		}, {
			"key01": "一/四事业部,七事业部,三事业部,九车间,二事业部",
			"key02": "03",
			"key03": "0,0,0,0,0"
		}, {
			"key01": "一/四事业部,七事业部,三事业部,九十一车间,九车间,二事业部",
			"key02": "04",
			"key03": "0,12.09,200.03,85.29,150.88,77.48"
		}, {
			"key01": "一/四事业部,七事业部,三事业部,九十一车间,九车间,二事业部",
			"key02": "05",
			"key03": "0,27.65,626.88,4.83,426.52,40.82"
		}, {
			"key01": "一/四事业部,七事业部,三事业部,二事业部",
			"key02": "06",
			"key03": "0,.99,938.33,.53"
		}, {
			"key01": "一/四事业部,七事业部,三事业部,九十一车间,九车间,二事业部",
			"key02": "07",
			"key03": "0,1.7,137.92,.6,136.19,62.21"
		}, {
			"key01": "一/四事业部,七事业部,三事业部,九十一车间,九车间,二事业部",
			"key02": "08",
			"key03": "0,912.84,4007.37,392.18,398.05,320.8"
		}, {
			"key01": "七事业部,三事业部,九十一车间,九车间",
			"key02": "09",
			"key03": "12.11,1620.94,6.88,815.48"
		}, {
			"key01": "七事业部,三事业部,九十一车间,九车间,二事业部",
			"key02": "10",
			"key03": "1008.11,5506.37,415.83,443.52,381.89"
		}, {
			"key01": "一/四事业部,七事业部,三事业部,九十一车间,九车间,二事业部",
			"key02": "11",
			"key03": "0,805.32,4268.02,259.35,368.11,212.62"
		}, {
			"key01": "七事业部,三事业部,九十一车间,九车间,二事业部",
			"key02": "12",
			"key03": "575.35,2610.19,127.74,443.9,246.94"
		}]
	};
	const name = resp.data[0].key01.split(',')
	renderBarChart('chart2', resp, name, '月')
	renderTable2Data(resp.data)
}

function renderQuarterSubject() {
	// $.get(`${API_URL}getdata`, {
	// 	...rateparams,
	// 	xm01: fullTaskNumber,
	// 	xm02: fullYear,
	// 	chartNo: 4
	// }, function(res) {
	// 	const resp = eval("(" + res + ")").items[0].charts[0];
	// 	const name = resp.data.length > 0 ? resp.data[0].key02.split(',') : []
	// 	renderBarChart('chart3', resp, name, '')
	// 	renderTable3Data(resp.data)
	// })

	const resp = {
		"chart_no": "4",
		"chart_name": "支出-季度科目费用{参数：xm01-任务编号；xm02-年份；返回值：key01-季度；key02-科目名称；key03-金额}",
		"key_count": "3",
		"data": [{
			"key01": "一季度",
			"key02": "事务费,固定资产折旧费,外协费,工资及劳务费,拨入科研费,材料费,燃料动力费,管理费",
			"key03": "0,0,0,0,-2419.88,-29.47,0,0"
		}, {
			"key01": "二季度",
			"key02": "专用费,事务费,固定资产折旧费,外协费,拨入科研费,材料费,燃料动力费,管理费",
			"key03": "310.64,.96,0,2020.56,198052.89,31.02,0,49.28"
		}, {
			"key01": "三季度",
			"key02": "专用费,事务费,固定资产折旧费,外协费,拨入科研费,材料费,燃料动力费,管理费",
			"key03": "651.3,1.86,0,2204.51,507505.35,3259.9,0,63.98"
		}, {
			"key01": "四季度",
			"key02": "专用费,事务费,固定资产折旧费,外协费,工资及劳务费,拨入科研费,材料费,燃料动力费,管理费",
			"key03": "340.87,1.5,2305.32,10324.11,9423.52,2764702.57,5010.61,1041.56,5227.64"
		}]
	};
	const name = resp.data.length > 0 ? resp.data[0].key02.split(',') : []
	renderBarChart('chart3', resp, name, '')
	renderTable3Data(resp.data)
}


function renderBarChart(elId, data, legends, unit) {
	noData(elId, data)
	if (elId === 'chart3') {
		data.data.length = 4
	}
	let colors = ['#165DFF', '#14C9C9', '#722ED1', '#F7BA1E', '#C9CDD4', '#F77234', '#3491FA', '#9FDB1D']
	const legendData = legends
	let xData = [];
	for (let i = 0; i < data.data.length; i++) {
		if (data.data[i] || data.data[i]) {
			xData.push(elId === 'chart3' ? data.data[i].key01 : data.data[i].key02);
		} else {
			xData.push('')
		}

	}
	const Data = [];
	for (let i = 0; i < legendData.length; i++) {
		Data.push({
			name: legendData[i],
			barWidth: "8%",
			type: "bar",
			barGap: 0,
			data: [],
			itemStyle: {
				color: colors[i],
			}
		})
		for (const item of data.data) {
			Data[i].data.push(parseFloat(item.key03.split(',')[i]) ? parseFloat(item.key03.split(',')[i]) : 0)
		}
	}
	const dataZoom = false;
	const legendPos = elId === 'chart3' ? {
		top: 'auto',
		right: 'auto',
		bottom: dataZoom ? '20' : "0",
		center: 'center'
	} : ''
	have(elId) ? barChart1(elId, Data, legendData, xData, unit, '万元', 0, legendPos, dataZoom) : "";
}

function renderLineChart(elId, data, legends) {
	noData(elId, data)
	let colors = ['#165DFF', '#14C9C9', '#F7BA1E']
	const legendData = legends;
	let xData = [];
	for (let i = 0; i < data.data.length; i++) {
		xData.push(data.data[i].key01);
	}
	const seriesData = [];
	for (let i = 0; i < legendData.length; i++) {
		seriesData.push({
			name: legendData[i],
			type: "line",
			symbol: 'none',
			smooth: true,
			itemStyle: {
				color: colors[i],
			},
			data: [],
		})
		for (const item of data.data) {
			seriesData[i].data.push(parseFloat(item.key03.split(',')[i]))
		}
	}
	have(elId) ? lineChartkzks(elId, seriesData, legendData, xData, '月', '万元') : "";
}



function renderTable1Data(data) {
	if (data.length === 0) {
		renderTable1([], [])
		return
	}
	const firstColumns = data[0].key02.split(',')
	let newData = firstColumns.map(it => ({
		key01: it,
		key02: 0
	}))
	for (let i = 0; i < data.length; i++) {
		for (let j = 0; j < newData.length; j++) {
			newData[j]['key02'] += +data[i].key03.split(',')[j]
			newData[j]['key0' + (i + 3)] = data[i].key03.split(',')[j]
		}
	}
	const thead = data.map(it => it.key01)
	renderTable1(newData, thead)
}

function renderTable2Data(data) {
	if (data.length === 0) {
		renderTable2([], [])
		return
	}
	const firstColumns = data[0].key01.split(',')
	let newData = firstColumns.map(it => ({
		key01: it,
		key02: 0
	}))
	for (let i = 0; i < data.length; i++) {
		for (let j = 0; j < newData.length; j++) {
			newData[j]['key02'] += data[i].key03.split(',')[j] ? (+data[i].key03.split(',')[j]) : 0;
			newData[j]['key0' + (i + 3)] = data[i].key03.split(',')[j] ? data[i].key03.split(',')[j] : 0
		}
	}
	const thead = data.map(it => it.key02)
	renderTable2(newData, thead)
}

function renderTable3Data(data) {
	if (data.length === 0 || !data[0]) {
		renderTable3([], [])
		return
	}
	const firstColumns = data[0].key02.split(',')
	let newData = firstColumns.map(it => ({
		key01: it,
		key02: 0
	}))
	for (let i = 0; i < data.length; i++) {
		for (let j = 0; j < newData.length; j++) {
			newData[j]['key02'] += +data[i].key03.split(',')[j]
			newData[j]['key0' + (i + 3)] = data[i].key03.split(',')[j]
		}
	}
	const thead = data.map(it => it.key01)
	renderTable3(newData, thead)
}

function renderTable1(data, thead) {
	const columns = [];
	columns[0] = thead.map((it, i) => ({
		field: 'key0' + (i + 3),
		title: +it + '月',
		align: 'right',
		valign: 'middle',
		width: 100,
		formatter: wyText
	}))
	columns[0].unshift({
		field: 'key01',
		title: '年份',
		align: 'left',
		width: 100,
		valign: 'middle',
		formatter: blodText
	})
	columns[0].push({
		field: 'key02',
		title: '合计',
		align: 'right',
		width: 100,
		valign: 'middle',
		formatter: function(value) {
			return `<h6>${value.toFixed(2)}</h6>`
		}
	})
	renderTable('table1', data, columns, false)
}

function renderTable2(data, thead) {
	const columns = [];
	columns[0] = thead.map((it, i) => ({
		field: 'key0' + (i + 3),
		title: +it + '月',
		align: 'right',
		valign: 'middle',
		width: 100,
		formatter: wyText
	}))
	columns[0].unshift({
		field: 'key01',
		title: '市场部',
		align: 'left',
		width: 100,
		valign: 'middle',
		formatter: blodText
	})
	columns[0].push({
		field: 'key02',
		title: '合计',
		align: 'right',
		width: 100,
		valign: 'middle',
		formatter: function(value) {
			return `<h6>${value.toFixed(2)}</h6>`
		}
	})
	renderTable('table2', data, columns, false)
}

function renderTable3(data, thead) {
	const columns = [];
	columns[0] = thead.map((it, i) => ({
		field: 'key0' + (i + 3),
		title: it,
		align: 'right',
		valign: 'middle',
		width: 100,
		formatter: wyText
	}))
	columns[0].unshift({
		field: 'key01',
		title: '市场部',
		align: 'left',
		width: 100,
		valign: 'middle',
		formatter: blodText
	})
	columns[0].push({
		field: 'key02',
		title: '合计',
		align: 'right',
		width: 100,
		valign: 'middle',
		formatter: function(value) {
			return `<h6>${value.toFixed(2)}</h6>`
		}
	})
	renderTable('table3', data, columns, false)
}